@import '@material/density/functions.import';
@import '@material/list/variables.import';
@import '@material/list/mixins.import';
@import '@material/ripple/variables.import';
@import '../mdc-helpers/mdc-helpers';

// TODO: implement mat-list[dense] once density system is in master

@mixin mat-mdc-list-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $is-dark-theme: map-get($config, is-dark);
  $state-opacities:
      if($is-dark-theme, $mdc-ripple-light-ink-opacities, $mdc-ripple-dark-ink-opacities);

  @include mat-using-mdc-theme($config) {
    @include mdc-list-without-ripple($query: $mat-theme-styles-query);
  }

  // MDC's state styles are tied in with their ripple. Since we don't use the MDC ripple, we need to
  // add the hover and focus states manually.
  .mat-mdc-list-item-interactive {
    &::before {
      background: if($is-dark-theme, white, black);
    }

    &:hover::before {
      opacity: map-get($state-opacities, hover);
    }

    &:focus::before {
      opacity: map-get($state-opacities, focus);
    }
  }
}

@mixin mat-mdc-list-density($config-or-theme) {
  $density-scale: mat-get-density-config($config-or-theme);
  $height: mdc-density-prop-value(
    $density-config: $mdc-list-single-line-density-config,
    $density-scale: $density-scale,
    $property-name: height,
  );

  // MDC list provides a mixin called `mdc-list-single-line-density`, but we cannot use
  // that mixin the generated generated density styles are scoped to `.mdc-list-item`, while
  // the styles should actually only affect single-line list items. This has been reported as
  // a bug in the MDC repository: https://github.com/material-components/material-components-web/issues/5737.
  .mat-mdc-list-item-single-line {
    @include mdc-list-single-line-height($height);
  }
}

@mixin mat-mdc-list-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  @include mat-using-mdc-typography($config) {
    @include mdc-list-without-ripple($query: $mat-typography-styles-query);
  }
}

@mixin mat-mdc-list-theme($theme-or-color-config) {
  $theme: _mat-legacy-get-theme($theme-or-color-config);
  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-list') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-mdc-list-color($color);
    }
    @if $density != null {
      @include mat-mdc-list-density($density);
    }
    @if $typography != null {
      @include mat-mdc-list-typography($typography);
    }
  }
}
